<template>
  <div class="viewTextPaper"> 
    <head-Menu></head-Menu>
    <div class="VTPContainer">
      <div class="examHeader">
        <h4 style="margin:10px 0">{{viewTextPaperInf.examName}}</h4>
      </div>
      <div class="answerSheet">
        <div v-if="topicLength.choice != 0" style="min-height:70px;padding-left: 10px">选择题
          <div v-for="(data, i) in viewTextPaper.choiceTopicList">
            <h5 style="display:flex">
              <a href="#"><div @click="toCollection(data, i)" class="collenctionBtn" v-bind:id="bindid('choice', i)"><i  class="el-icon-star-off"></i></div></a>
              <span style="margin-left:5px;max-width:800px;line-height:28px">{{i + 1}}、({{viewTextPaper.choiceScoreList[i]}}分){{data.stem}}</span>
            </h5>
            <el-radio-group v-model="viewTextPaper.userChoiceAnsList[i]" size="mini" >
              <el-radio disabled label="A" style="margin-bottom:5px;">A、{{data.A}}</el-radio>
              <el-radio disabled label="B" style="margin-bottom:5px">B、{{data.B}}</el-radio>
              <el-radio disabled label="C" style="margin-bottom:5px">C、{{data.C}}</el-radio>
              <el-radio disabled label="D" style="margin-bottom:5px">D、{{data.D}}</el-radio>
            </el-radio-group>

            <el-collapse accordion>
              <el-collapse-item>
                <template slot="title">
                  <span style="margin-right:20px">答案：{{data.answer}}</span> 
                  <span>你的答案：{{viewTextPaper.userChoiceAnsList[i]}}</span> 
                </template>
                <div>解析:</div>
                <div style="text-indent: 2em;" v-if="data.analysis == '' || data.analysis == undefined">略</div>
                <div style="max-width:800px;word-break: break-all;text-indent: 2em;" v-else>{{data.analysis}}</div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </div>
        <div v-if="topicLength.judge != 0" style="min-height:70px;padding-left: 10px;padding-top:10px">判断题
          <div v-for="(data, i) in viewTextPaper.judgeTopicList">
            <h5 style="display:flex">
              <a href="#"><div @click="toCollection(data, i)" class="collenctionBtn" v-bind:id="bindid('judge', i)"><i  class="el-icon-star-off"></i></div></a>
              <span style="margin-left:5px;max-width:800px;line-height:28px">{{i + 1}}、({{viewTextPaper.judgeScoreList[i]}}分){{data.stem}}</span>
            </h5>
            <el-radio-group v-model="viewTextPaper.userJudgeAnsList[i]" size="mini" >
              <el-radio disabled label="true" style="margin-bottom:5px;"><i class="el-icon-check"></i></el-radio>
              <el-radio disabled label="false" style="margin-bottom:5px"><i class="el-icon-close"></i></el-radio>
            </el-radio-group>

            <el-collapse accordion>
              <el-collapse-item>
                <template slot="title">
                  <span style="margin-right:20px">答案：{{data.answer}}</span> 
                  <span>你的答案：{{viewTextPaper.userJudgeAnsList[i]}}</span> 
                </template>
                <div>解析:</div>
                <div style="text-indent: 2em;" v-if="data.analysis == '' || data.analysis == undefined">略</div>
                <div style="max-width:800px;word-break: break-all;text-indent: 2em;" v-else>{{data.analysis}}</div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </div>
        <div v-if="topicLength.fillBlank != 0" style="min-height:70px;padding-left: 10px;padding-top:10px">填空题
          <div v-for="(data, i) in viewTextPaper.fillBlankTopicList">
            <h5 style="display:flex">
              <a href="#"><div @click="toCollection(data, i)" class="collenctionBtn" v-bind:id="bindid('fillBlank', i)"><i  class="el-icon-star-off"></i></div></a>
              <span style="margin-left:5px;max-width:800px;line-height:28px">{{i + 1}}、({{viewTextPaper.fillBlankScoreList[i]}}分){{data.stem}}</span>
            </h5>
            <el-input  style="width:300px" v-model="viewTextPaper.userFillBlankAnsList[i]" placeholder="请输入内容"></el-input>

            <el-collapse accordion>
              <el-collapse-item>
                <template slot="title">
                  <span style="margin-right:20px;width:600px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" >点击查看解析</span> 
                </template>
                <div>答案:</div>
                <div style="max-width:800px;word-break: break-all;text-indent: 2em;">{{data.answer}}</div>
                <el-divider></el-divider>
                <div>解析:</div>
                <div style="text-indent: 2em;" v-if="data.analysis == '' || data.analysis == undefined">略</div>
                <div style="max-width:800px;word-break: break-all;text-indent: 2em;" v-else>{{data.analysis}}</div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </div>
        <div v-if="topicLength.comprehensive != 0" style="min-height:70px;padding-left: 10px;padding-top:10px">综合题
          <div v-for="(data, i) in viewTextPaper.comprehensiveTopicList">
            <h5 style="display:flex">
              <a href="#"><div @click="toCollection(data, i)" class="collenctionBtn" v-bind:id="bindid('comprehensive', i)"><i  class="el-icon-star-off"></i></div></a>
              <span style="margin-left:5px;max-width:800px;line-height:28px">{{i + 1}}、({{viewTextPaper.comprehensiveScoreList[i]}}分){{data.stem}}</span>
            </h5>
            <el-input style="width:600px" type="textarea" :autosize="{ minRows: 4, maxRows: 30}" :disabled="true" v-model="viewTextPaper.userComprehensiveAnsList[i]"></el-input>
          
          <el-collapse accordion>
              <el-collapse-item>
                <template slot="title">
                  <span style="margin-right:20px;width:600px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" >点击查看解析</span> 
                </template>
                <div>答案:</div>
                <div style="max-width:800px;word-break: break-all;text-indent: 2em;">{{data.answer}}</div>
                <el-divider></el-divider>
                <div>解析:</div>
                <div style="text-indent: 2em;" v-if="data.analysis == '' || data.analysis == undefined">略</div>
                <div style="max-width:800px;word-break: break-all;text-indent: 2em;" v-else>{{data.analysis}}</div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </div>
  
        <el-drawer style="text-align: center" title="添加收藏" :visible.sync="drawer" direction="rtl">
          <el-tree style="height:250px;overflow-y: auto" ref="tree" :data="CSData" show-checkbox node-key="label"></el-tree>

          <el-button @click="innerDrawer = true" icon="el-icon-plus" style="width:100%;line-height:20px;margin:0 auto;color:#50a3a2">创建收藏夹</el-button>
          <el-button @click="collection(collectionData)" style="margin: 20px auto" type="primary" round>确认收藏</el-button>

          <el-drawer class="inner" title="创建收藏夹" :visible.sync="innerDrawer" direction="btt" :append-to-body="true">
            <el-form ref="form" :model="CSForm" label-width="80px" style="width:80%;text-align:left;">
              <el-form-item label="课 目">
                <el-select v-model="CSForm.subject" placeholder="请选择课目">
                  <el-option v-for="data in CSData" :label="data.label" :value="data.label"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="文件名">
                <el-input v-model="CSForm.collectionStructureName" maxlength="10" show-word-limit></el-input>
              </el-form-item>
            </el-form>
          <el-button @click="collectionStructure(CSData)" type="primary" round>创建收藏夹</el-button>
          </el-drawer>
        </el-drawer>
        

      </div>
    </div>
  </div>
</template>

<script>
import headMenu from '../../components/headMenu.vue'
import { getViewTextPaper, collectTopic, collectionStructure , getCollectionStructure, getcollectTopicNum } from "../../api/user";
import { Toast } from "vant";
export default {
  data() {
    return {
      viewTextPaperInf: {},
      viewTextPaper: {},
      topicLength: {
        choice: 0,
        judge: 0,
        fillBlank: 0,
        comprehensive: 0
      },

      collectionData: {},
      CSForm: {
        subject: '',
        collectionStructureName: '',
      },
      drawer: false,
      innerDrawer: false,

      CSData: [],
    }
  },
  components: {
    headMenu
  },
  props: {
    params: {
        type: Object,
        default:{}
    }
  },
  created() {
    this.viewTextPaperInf = JSON.parse(sessionStorage.getItem('viewTextPaperInf'))
    this.getViewTextPaper(this.viewTextPaperInf)
  },
  methods: {
    async getViewTextPaper(inf){
      await getViewTextPaper(inf)
        .then((res)=> {
          this.viewTextPaper = res.viewTextPaper
          this.topicLength.choice = this.viewTextPaper.choiceTopicList.length
          this.topicLength.judge = this.viewTextPaper.judgeTopicList.length
          this.topicLength.fillBlank = this.viewTextPaper.fillBlankTopicList.length
          this.topicLength.comprehensive = this.viewTextPaper.comprehensiveTopicList.length
          this.Discoloration()
        })
    },
    async getCollectionStructure() {
      await getCollectionStructure(this.params)
        .then((res) => {
          this.CSData = res.data
          console.log(this.CSData);
        })
    },
    async collectionStructure(data) {
      await collectionStructure({data, userInf: this.params, CSForm: this.CSForm})
        .then((res) => {
          Toast(res.msg)
          this.getCollectionStructure()
          this.innerDrawer = false
        })
    },
    async collection(data){
      await collectTopic({ topicData: data.data, userAns:data.userAns, collectionStructureName: this.$refs.tree.getCheckedNodes(false, true), inf:this.params })
        .then((res) => {
          Toast(res.msg)
          this.Discoloration()
        })
    },
    toCollection(data, i) {
      this.getCollectionStructure()
      this.drawer = true
      this.collectionData = {data, userAns: this.viewTextPaper.userChoiceAnsList[i]}
    },
    treeCheckedChange(data,isChecked){
      console.log(data);
      if(isChecked){
        const checked = [data.subject]; // id为tree的node-key属性
        this.$refs.tree.setCheckedKeys(checked);
      }
    },
    async Discoloration(){
      await getcollectTopicNum(this.params)
        .then((res) => {
          let choiceTopic = []
          let judgeTopic = []
          let fillBlankTopic = []
          let comprehensiveTopic = []
          for (let i = 0; i < this.viewTextPaper.choiceTopicList.length; i++) {
            choiceTopic.push(this.viewTextPaper.choiceTopicList[i].topicNum)
          }
          for (let i = 0; i < this.viewTextPaper.judgeTopicList.length; i++) {
            judgeTopic.push(this.viewTextPaper.judgeTopicList[i].topicNum)
          }
          for (let i = 0; i < this.viewTextPaper.fillBlankTopicList.length; i++) {
            fillBlankTopic.push(this.viewTextPaper.fillBlankTopicList[i].topicNum)
          }
          for (let i = 0; i < this.viewTextPaper.comprehensiveTopicList.length; i++) {
            comprehensiveTopic.push(this.viewTextPaper.comprehensiveTopicList[i].topicNum)
          }

          for (let i = 0; i < res.topicNumList.length; i++) {
            if (choiceTopic.indexOf(res.topicNumList[i]) != -1) {
              document.getElementById('choice' + choiceTopic.indexOf(res.topicNumList[i])).style.color = '#fff'
              document.getElementById('choice' + choiceTopic.indexOf(res.topicNumList[i])).style.border = '#e6a23c'
              document.getElementById('choice' + choiceTopic.indexOf(res.topicNumList[i])).style.backgroundColor = '#e6a23c'
              document.getElementById('choice' + choiceTopic.indexOf(res.topicNumList[i])).style.pointerEvents = 'none'
            }else if (judgeTopic.indexOf(res.topicNumList[i]) != -1) {
              document.getElementById('judge' + judgeTopic.indexOf(res.topicNumList[i])).style.color = '#fff'
              document.getElementById('judge' + judgeTopic.indexOf(res.topicNumList[i])).style.border = '#e6a23c'
              document.getElementById('judge' + judgeTopic.indexOf(res.topicNumList[i])).style.backgroundColor = '#e6a23c'
              document.getElementById('judge' + judgeTopic.indexOf(res.topicNumList[i])).style.pointerEvents = 'none'
            }else if (fillBlankTopic.indexOf(res.topicNumList[i]) != -1) {
              document.getElementById('fillBlank' + fillBlankTopic.indexOf(res.topicNumList[i])).style.color = '#fff'
              document.getElementById('fillBlank' + fillBlankTopic.indexOf(res.topicNumList[i])).style.border = '#e6a23c'
              document.getElementById('fillBlank' + fillBlankTopic.indexOf(res.topicNumList[i])).style.backgroundColor = '#e6a23c'
              document.getElementById('fillBlank' + fillBlankTopic.indexOf(res.topicNumList[i])).style.pointerEvents = 'none'
            }else if (comprehensiveTopic.indexOf(res.topicNumList[i]) != -1) {
              document.getElementById('comprehensive' + comprehensiveTopic.indexOf(res.topicNumList[i])).style.color = '#fff'
              document.getElementById('comprehensive' + comprehensiveTopic.indexOf(res.topicNumList[i])).style.border = '#e6a23c'
              document.getElementById('comprehensive' + comprehensiveTopic.indexOf(res.topicNumList[i])).style.backgroundColor = '#e6a23c'
              document.getElementById('comprehensive' + comprehensiveTopic.indexOf(res.topicNumList[i])).style.pointerEvents = 'none'
            }
          }
        })
    },
    bindid(type, i){
      return type + i
    },
  },
}
</script>

<style lang='stylus'>
.viewTextPaper
  flex 1 1 100%
  display block
  .VTPContainer
    margin 0 10px
    border 1px solid #CCCCCC  
    text-align center
  .answerSheet
    text-align left
    margin 20px 0 0 30px
    overflow-y auto
    max-height 550px
    .collenctionBtn
      width 28px
      height 28px
      border-radius 100%
      display flex
      align-items center
      justify-content center
      color #E6A23C
      border 1px solid #f5dab1
      background-color #fdf6ec
.inner
  width 30%
  left 70%
.btt
  height 35% !important
  text-align center
.el-checkbox.is-disabled
  display none

</style>